<template>
  <div class="doctorsay">
    <!-- 头条精选-达人榜单 -->
    <div class="doctorsay_top">
      <van-grid :border="false">
        <van-grid-item>
          <van-image src="https://z3.ax1x.com/2021/07/19/W8q0Mj.png" />
          <h2 class="head">
            头条精选
            <span>夏季变美大作战</span>
          </h2>
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://z3.ax1x.com/2021/07/19/W8qBss.png" />
          <h2 class="head head_two">
            达人榜
            <span>丁架月领街达人榜</span>
          </h2>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 医生文章 -->
    <div class="doctorsay_mid">
      <van-grid :border="false">
        <van-grid-item>
          <div class="doctor_info">
            <div class="doctor_img">
              <img src="https://z3.ax1x.com/2021/07/17/Wlx11g.png" />
            </div>
            <div class="doctor_message">
              <h2 class="doctor_name">
                韩风梅
                <span class="doctor_profession">主任医师</span>
                <p class="time">15小时前</p>
              </h2>
            </div>
          </div>
          <div class="doctor_content">
            <h2>“生命之桥”输卵管，到底是怎么“堵的”？</h2>
            <div class="say_content">
              <p>
                人们常常将输卵管称作“生命之桥”，那是因为输卵管在生育中起到极其重要的作用，临床上的不孕症有一半是由于输卵管因素引发的。哪些原因引ssssssssssssssssssssssssssss
              </p>
              <span>全文</span>
            </div>
          </div>
          <div class="doctor_order">
            <div class="doctor_look"><i>3651</i>阅读</div>
            <div class="orders">
              <span class="oder_up"> <i></i>点赞</span>
              <span class="oder_constr"> <i></i>评论</span>
            </div>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div class="doctor_info">
            <div class="doctor_img">
              <img src="https://z3.ax1x.com/2021/07/17/Wlx11g.png" />
            </div>
            <div class="doctor_message">
              <h2 class="doctor_name">
                韩风梅
                <span class="doctor_profession">主任医师</span>
                <p class="time">15小时前</p>
              </h2>
            </div>
          </div>
          <div class="doctor_content">
            <h2>“生命之桥”输卵管，到底是怎么“堵的”？</h2>
            <div class="say_content">
              <p>
                人们常常将输卵管称作“生命之桥”，那是因为输卵管在生育中起到极其重要的作用，临床上的不孕症有一半是由于输卵管因素引发的。哪些原因引ssssssssssssssssssssssssssss
              </p>
              <span>全文</span>
            </div>
          </div>
          <div class="doctor_order">
            <div class="doctor_look"><i>3651</i>阅读</div>
            <div class="orders">
              <span class="oder_up"> <i></i>点赞</span>
              <span class="oder_constr"> <i></i>评论</span>
            </div>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div class="doctor_info">
            <div class="doctor_img">
              <img src="https://z3.ax1x.com/2021/07/17/Wlx11g.png" />
            </div>
            <div class="doctor_message">
              <h2 class="doctor_name">
                韩风梅
                <span class="doctor_profession">主任医师</span>
                <p class="time">15小时前</p>
              </h2>
            </div>
          </div>
          <div class="doctor_content">
            <h2>“生命之桥”输卵管，到底是怎么“堵的”？</h2>
            <div class="say_content">
              <p>
                人们常常将输卵管称作“生命之桥”，那是因为输卵管在生育中起到极其重要的作用，临床上的不孕症有一半是由于输卵管因素引发的。哪些原因引ssssssssssssssssssssssssssss
              </p>
              <span>全文</span>
            </div>
          </div>
          <div class="doctor_order">
            <div class="doctor_look"><i>3651</i>阅读</div>
            <div class="orders">
              <span class="oder_up"> <i></i>点赞</span>
              <span class="oder_constr"> <i></i>评论</span>
            </div>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div class="doctor_info">
            <div class="doctor_img">
              <img src="https://z3.ax1x.com/2021/07/17/Wlx11g.png" />
            </div>
            <div class="doctor_message">
              <h2 class="doctor_name">
                韩风梅
                <span class="doctor_profession">主任医师</span>
                <p class="time">15小时前</p>
              </h2>
            </div>
          </div>
          <div class="doctor_content">
            <h2>“生命之桥”输卵管，到底是怎么“堵的”？</h2>
            <div class="say_content">
              <p>
                人们常常将输卵管称作“生命之桥”，那是因为输卵管在生育中起到极其重要的作用，临床上的不孕症有一半是由于输卵管因素引发的。哪些原因引ssssssssssssssssssssssssssss
              </p>
              <span>全文</span>
            </div>
          </div>
          <div class="doctor_order">
            <div class="doctor_look"><i>3651</i>阅读</div>
            <div class="orders">
              <span class="oder_up"> <i></i>点赞</span>
              <span class="oder_constr"> <i></i>评论</span>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<style lang="less" scoped>
.doctorsay {
  // 达人榜单样式
  background: #f4f5f9;
  :deep(.doctorsay_top) {
    .van-grid-item {
      flex-basis: 50% !important;
    }
    .van-grid-item__content {
      padding: 18px 5px;
      position: relative;
    }
    .head {
      position: absolute;
      left: 12px;
      font-size: 18px;
      color: #436db6;
      span {
        display: block;
        margin-top: 5px;
        font-size: 14px;
        font-weight: 500;
        color: #6d91d5;
      }
    }
    .head_two {
      color: #914c19;
      span {
        color: #cd8e5a;
      }
    }
  }
  // 医生文章
  :deep(.doctorsay_mid) {
    .van-grid-item {
      flex-basis: 100% !important;
      margin-top: 10px;
    }
    .doctor_info {
      width: 100%;
      display: flex;
      .doctor_img {
        width: 45px;
        border-radius: 100%;
        margin-right: 10px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .doctor_message {
      margin-left: 5px;
      margin-top: 5px;
      font-size: 18px;
      color: #333333;
      .doctor_profession {
        font-size: 14px;
        color: #333;
      }
      .time {
        font-size: 13px;
        padding-top: 8px;
        color: #999;
      }
    }
    .doctor_content {
      h2 {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        line-height: 36px;
      }
      .say_content {
        font-size: 14px;
        font-weight: 500;
        color: #666666;
        line-height: 18px;
        position: relative;
        padding: 0 12px;
        p {
          display: -webkit-inline-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        span {
          color: #35abf8;
          position: absolute;
          right: 30px;
          bottom: 3px;
        }
      }
    }
    .doctor_order {
      padding: 10px 12px 0;
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      .doctor_look {
        font-size: 12px;
        color: #666666;
      }
      .orders {
        font-size: 12px;
        color: #646a7a;
        margin-right: 12px;
      }
    }
    .oder_up,
    .oder_constr {
      margin-right: 12px;
      i {
        margin-right: 4px;
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        background: url(https://z3.ax1x.com/2021/07/19/WGT2O1.png);
        background-size: 100% 100%;
      }
    }
    .oder_constr {
      i {
        background: url(https://z3.ax1x.com/2021/07/19/WGTWex.png);
        background-size: 100% 100%;
      }
    }
  }
}
</style>
